import React, { useRef, useState } from 'react'
import './video.css'
import { Button } from 'antd'
import { useTranslation } from 'react-i18next'

function VideoPlayer() {
    const videoRef = useRef<HTMLVideoElement>(null)
    const [currentVideoIndex, setCurrentVideoIndex] = useState(0)
    const [isPaused, setIsPaused] = useState(false)
    const { t } = useTranslation()
    
    const videoList = [
        'https://media.w3.org/2010/05/sintel/trailer_hd.mp4',
        "https://e-file.huawei.com/mediares/Video_MCD/EBG/PUBLIC/zh/2023/11/1a9abd9a-a1fa-4107-86b1-4447bd572e4c.mp4"
    ]

    const changeVideo = (index: number) => {
        if (index >= 0 && index < videoList.length) {
            setCurrentVideoIndex(index)
            if (videoRef.current) {
                videoRef.current.src = videoList[index]
                videoRef.current.load()
                videoRef.current.play()
            }
        }
    }

    const handleMouseEnter = () => {
        if (videoRef.current) {
            videoRef.current.pause()
            setIsPaused(true)
        }
    }

    const handleMouseLeave = () => {
        if (videoRef.current) {
            videoRef.current.play()
            setIsPaused(false)
        }
    }

    return (
        <div className='container' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
            <div className="video-wrapper">
                <video ref={videoRef} controls>
                    <source className='video' src={videoList[currentVideoIndex]} type='video/mp4' />
                    {t('video.browserNotSupport')}
                </video>
            </div>
            <div className='but-con'>
                <Button 
                    onClick={() => changeVideo(currentVideoIndex - 1)} 
                    disabled={currentVideoIndex === 0}
                    className='tt'
                >
                    {t('video.previous')}
                </Button>
                <Button 
                    onClick={() => changeVideo(currentVideoIndex + 1)} 
                    disabled={currentVideoIndex === videoList.length - 1}
                    className='tt'
                >
                    {t('video.next')}
                </Button>
            </div>
        </div>
    )
}

export default VideoPlayer
